<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>发票信息</title>
        <style type="text/css">
            .box {
                background: #ffffff;
                border-radius: 12px;
                padding: 12px;
                margin: 12px;
            }

            .row {
                display: flex;
            }

            .title {
                padding-right: 16px;
                flex-shrink: 0;
                font-size: 15px;
            }

            .content {
                margin-top: 12px;
                color: #0091ff;
            }

            .textarea {
                margin-top: 10px;
                padding: 12px;
                line-height: 1.5;
                font-size: 14px;
                color: #333;
                width: 100%;
                width: 100%;
                box-sizing: border-box;
                border: none;
                background: #f5f5f5;
                border-radius: 4px;
            }

            .input {
                display: none;
            }

            .submitBtn {
                color: #db0032;
                font-size: 18px;
                text-align: center;
                margin: 24px 18px;
                line-height: 48px;
                border: 1px solid currentColor;
                border-radius: 25px;
            }
        </style>
    </head>
    <body style="background: #f7f7f7">
        <div class="box">
            <!-- <div class="row"> -->
            <div class="title">上传电子发票</div>
            <div class="content">
                <div id="choseBill">点击上传（仅支持PDF格式）</div>
            </div>
            <!-- </div> -->
        </div>
        <div class="box">
            <div class="title">发票备注</div>
            <textarea id="textarea" rows="" cols="" class="textarea"></textarea>
        </div>
        <div class="submitBtn" id="submitBtn">保存</div>
        <input class="input" id="input" type="file" accept="" />
        <script type="text/javascript">
            var userAgent = navigator.userAgent
            if (userAgent.indexOf("AlipayClient") > -1) {
                // 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
                document.writeln('<script src="https://appx/web-view.min.js"' + ">" + "<" + "/" + "script>")
            } else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
                // QQ 小程序
                document.write(
                    '<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>',
                )
            } else if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {
                // 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
                document.write(
                    '<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>',
                )
            } else if (/toutiaomicroapp/i.test(userAgent)) {
                // 头条小程序 JS-SDK 如果不需要兼容头条小程序，则无需引用此 JS 文件。
                document.write(
                    '<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>',
                )
            } else if (/swan/i.test(userAgent)) {
                // 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。
                document.write(
                    '<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>',
                )
            } else if (/quickapp/i.test(userAgent)) {
                // quickapp
                document.write('<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>')
            }
            // if (!/toutiaomicroapp/i.test(userAgent)) {
            // 	document.querySelector('.post-message-section').style.visibility = 'visible';
            // }
        </script>
        <script type="text/javascript" src="./uni.webview.1.5.2.js"></script>
        <script type="text/javascript">
            var choseBillBtn = document.getElementById("choseBill")
            var submitBtn = document.getElementById("submitBtn")
            var textarea = document.getElementById("textarea")
            var input = document.getElementById("input")
            var data = {}
            window.onload = function (e) {
                console.log(1234)
                var remark = getQueryVariable("remark")
                var images = getQueryVariable("images")
                if (remark && remark != undefined && remark != "undefined") {
                    textarea.value = decodeURIComponent(remark)
                    data.remark = textarea.value
                }
                if (images && images != undefined && images != "undefined") {
                    var arr = images.split("/")
                    if (arr && arr.length > 0) {
                        choseBillBtn.innerHTML = arr[arr.length - 1]
                    }
                }
            }
            var getQueryVariable = function (variable) {
                var query = window.location.search.substring(1)
                var vars = query.split("&")
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=")
                    if (pair[0] == variable) {
                        return pair[1]
                    }
                }
                return false
            }
            // 提交按钮
            submitBtn.addEventListener(
                "click",
                function (e) {
                    console.log(1234)
                    data.changeType = 0
                    postMessage(data)
                },
                false,
            )
            // 上传按钮
            choseBillBtn.addEventListener(
                "click",
                function (e) {
                    // 在被点击的div内显示当前被点击次数
                    console.log(123)
                    input.click()
                },
                false,
            )
            // 上传文件修改
            input.addEventListener("change", function (e) {
                console.log(e)
                console.log(input.files[0])
                const file = e.target.files[0] //目标文件
                if (file.name.toUpperCase().indexOf(".PDF") < 0) {
                    choseBillBtn.innerHTML = "点击上传（仅支持PDF格式）"
                    data.changeType = 3
                    postMessage(data)
                    return
                } else {
                    choseBillBtn.innerHTML = file.name
                    let reader = new FileReader()
                    reader.readAsDataURL(file) //转为文件流
                    reader.onload = (e) => {
                        let base64 = e.target.result
                        console.log("e.target.result", base64)
                        data.base64 = base64
                        // data.changeType = 1
                        // postMessage(data)
                    }
                }
            })
            textarea.addEventListener("blur", function (e) {
                console.log(textarea.value)
                data.remark = textarea.value
                // data.changeType = 2
                // postMessage(data)
            })

            var postMessage = function (data) {
                uni.postMessage({
                    data: data,
                })
            }
        </script>
    </body>
</html>
